<script lang="ts" setup>
import type { FormSchema } from '@croco/framework/libraries';
import type { Recordable } from '@croco/framework/types';

import { computed, h, ref } from 'vue';

import { AuthenticationRegister, z } from '@croco/framework/libraries';
import { $t } from '@croco/framework/locales';

defineOptions({ name: 'Register' });

const loading = ref(false);

const formSchema = computed((): FormSchema[] => {
    return [
        {
            component: 'VInput',
            componentProps: {
                placeholder: $t('authentication.usernameTip'),
            },
            fieldName: 'username',
            label: $t('authentication.username'),
            rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
        },
        {
            component: 'VInputPassword',
            componentProps: {
                passwordStrength: true,
                placeholder: $t('authentication.password'),
            },
            fieldName: 'password',
            label: $t('authentication.password'),
            renderComponentContent() {
                return {
                    strengthText: () => $t('authentication.passwordStrength'),
                };
            },
            rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
        },
        {
            component: 'VInputPassword',
            componentProps: {
                placeholder: $t('authentication.confirmPassword'),
            },
            dependencies: {
                rules(values) {
                    const { password } = values;
                    return z
                        .string({ required_error: $t('authentication.passwordTip') })
                        .min(1, { message: $t('authentication.passwordTip') })
                        .refine((value) => value === password, {
                            message: $t('authentication.confirmPasswordTip'),
                        });
                },
                triggerFields: ['password'],
            },
            fieldName: 'confirmPassword',
            label: $t('authentication.confirmPassword'),
        },
        {
            component: 'VCheckbox',
            fieldName: 'agreePolicy',
            renderComponentContent: () => ({
                default: () =>
                    h('span', [
                        $t('authentication.agree'),
                        h(
                            'a',
                            {
                                class: 'py-link ml-1 ',
                                href: '',
                            },
                            `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
                        ),
                    ]),
            }),
            rules: z.boolean().refine((value) => !!value, {
                message: $t('authentication.agreeTip'),
            }),
        },
    ];
});

function handleSubmit(value: Recordable<any>) {
    // eslint-disable-next-line no-console
    console.log('register submit:', value);
}
</script>

<template>
    <AuthenticationRegister :form-schema="formSchema" :loading="loading" @submit="handleSubmit" />
</template>
